<template>
	<up-popup :customStyle="customStyles" round="15" :show="show" mode="center">
		<view class="pad-30 up-popup-bg radius30">
			<view class="text-center font-36">{{title}}</view>
			<view class="mar-top-16">
				<up-input :type="type" :customStyle="{background:'#F7F8FA',border:'1rpx solid #D9D9D9'}"
					:placeholder="placeholder" border="surround" v-model="_value">
					<template #suffix>
						<text>{{suffix}}</text>
					</template>
				</up-input>
			</view>
			<view class="betweenX gap60 font-30 mar-top-40">
				<view @click="hanldeCancel" class="flex-w cancel radius50 pad-top-bottom-25 text-center">
					{{cancelText}}
				</view>
				<view @click="hanldeConfirm"
					class="flex-w bg-theme color-white radius50 pad-top-bottom-25 button-style text-center">
					{{confirmText}}
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import { ref, computed } from 'vue';
	const emit = defineEmits(['update:modelValue', 'cancel', 'confirm'])

	const props = defineProps({
		show: {
			type: Boolean,
			default: false,
		},
		title: {
			type: String,
			default: '提示'
		},
		content: {
			type: String,
			default: '一段内容'
		},
		cancelText: {
			type: String,
			default: '取消'
		},
		confirmText: {
			type: String,
			default: '确认'
		},
		placeholder: {
			type: String,
			default: '请输入'
		},
		modelValue: {
			type: String,
			default: ''
		},
		type: {
			type: String,
			default: 'text'
		},
		suffix:{
			type: String,
			default: ''
		}
	});

	const customStyles = ref({
		width: '650rpx',
		height: '300rpx'
	})


	const _value = computed({
		get: () => props.modelValue,
		set: (val) => emit('update:modelValue', val)
	})


	// 点击取消关闭
	const hanldeCancel = () => {
		emit('cancel')
	}

	// 确认
	const hanldeConfirm = () => {
		emit('confirm')
	}
</script>

<style scoped lang="scss">
	.content {
		height: 200rpx;
	}

	.up-popup-bg {
		background: linear-gradient(180deg, #F1F5FC 0%, #FFFFFF 100%);
	}

	.cancel {
		// border: 2rpx solid $uni-color-primary;
		background: rgba(0, 85, 254, 0.1);
	}
</style>